<template>
  <el-popover
    ref="ref-popover"
    v-model="visible"
    :title="title"
    v-bind="popoverProps"
    v-on="popoverEvents"
  >
    <el-scrollbar
      :style="scrollbarStyle"
      class="scroll-container"
    >
      <el-form-package
        ref="ref-form"
        :c-m="formCM"
        :linkage="formLinkage"
        :reset-to="formResetTo"
        :loading="formLoading"
        @input="handleFormInput($event)"
      />
    </el-scrollbar>
    <tg-control-bar
      v-if="hasControlBar"
      :left-items="controlBarLeftItems"
      :right-items="controlBarRightItems"
    />
    <el-button-package
      slot="reference"
      :c-m="referenceCM"
    />
  </el-popover>
</template>

<script lang="ts">
/*
prop 列表 [参考 TgForm]
  popoverCM: ComponentModel   弹出框组件模型
  referenceCM: ComponentModel 弹出框触发按钮组件模型
ref 列表 [参考 TgForm]
  ref-popover
*/
import { Component, Prop } from 'vue-property-decorator'
import TgForm from './TgForm'
import { ComponentModel } from '@TG/interface'
import { isNotEmpty } from '@TG/kit/validate'
import { appModule } from '@TG/store/modules/app'
import ElButtonPackage from '../ElPackage/ElButtonPackage.vue'
import ElFormPackage from '../ElPackage/ElFormPackage.vue'
import TgControlBar from '../TgControlBar/index.vue'

@Component({
  name: 'TgFormBasicPopover',
  components: {
    ElButtonPackage,
    ElFormPackage,
    TgControlBar
  }
})
export default class extends TgForm {
  @Prop({ type: Object }) private popoverCM!: ComponentModel
  @Prop({ type: Object, required: true }) private referenceCM!: ComponentModel

  private visible: boolean = false

  get popoverProps() {
    return Object.assign({ width: appModule.pageSize.width * 0.75 }, this.popoverCM?.props)
  }

  get popoverEvents() {
    // return Object.assign({ 'after-leave': () => this.model = this.getModel() }, this.popoverCM?.events)
    return this.popoverCM?.events
  }

  get scrollbarStyle() {
    let maxHeight: number = this.maxHeight === -1 ? appModule.pageSize.height * 0.75 : this.maxHeight
    maxHeight -= 2 // mainborder 2
    maxHeight -= 24 // mainpadding 24
    maxHeight -= 28 // title 16 + 12
    maxHeight -= 17 // bodymargin 17
    if (this.hasControlBar) {
      maxHeight -= 58 // controlbar 58
    }
    maxHeight -= 12 // mainmargin 12
    if (this.holdHeight) {
      return { height: `${maxHeight}px` }
    } else {
      return { 'max-height': `${maxHeight}px` }
    }
  }

  public showPopover() {
    this.visible = true
    this.clearValidate()
  }

  public hidePopover() {
    this.visible = false
  }
}
</script>

<style lang="scss" scoped>
.scroll-container {
  margin-bottom: 17px;
  ::v-deep {
    .el-scrollbar__wrap {
      height: 100%;
      overflow-x: hidden;
    }
    .el-scrollbar__view {
      overflow-x: hidden;
    }
  }
}
</style>
